{% extends 'base.html' %}
{% load static %}
{% load persian %}

{% block title %}ویدئوها - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<!-- ===== استایل اختصاصی برای ۳ ستونه ===== -->
<style>
    @media (min-width: 993px) {
        .video-grid { grid-template-columns: repeat(3, 1fr) !important; }
    }
    @media (max-width: 992px) and (min-width: 577px) {
        .video-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 576px) {
        .video-grid { grid-template-columns: 1fr !important; }
    }
</style>
<!-- =================================== -->

<div class="category-header">
    <h2><i class="fas fa-video"></i> ویدئوها</h2>
    <p>مجموعه ویدئوهای مرتبط با شهدا، ایثارگران و رویدادهای فرهنگی</p>
</div>

<div class="video-grid">
    {% for video in page_obj %}
    <div class="video-item">
        <a href="{% url 'video_detail' video.slug %}" style="display:block; position:relative;">
            <img src="{{ video.thumbnail.url }}" alt="{{ video.title }}">
            <div class="play-icon">
                <i class="fas fa-play"></i>
            </div>
        </a>
        <div class="info">
            <h4><a href="{% url 'video_detail' video.slug %}">{{ video.title }}</a></h4>
            <p>{{ video.description|truncatewords:12 }}</p>
            <div class="meta">
                <span><i class="fas fa-calendar-alt"></i> {{ video.publish_time|date:"Y/m/d"|to_persian_num }}</span>
                <span><i class="fas fa-eye"></i> {{ video.views|to_persian_num }} بازدید</span>
            </div>
        </div>
    </div>
    {% empty %}
    <p style="grid-column: 1 / -1; text-align: center; padding: 50px; background: #fff; border-radius: 14px; color: #6c7065;">
        <i class="fas fa-info-circle"></i> ویدئویی برای نمایش وجود ندارد.
    </p>
    {% endfor %}
</div>

<!-- ===== صفحه‌بندی ویدئوها ===== -->
{% if page_obj.has_other_pages %}
<div class="pagination-container">
    {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}" class="page-link"><i class="fas fa-chevron-right"></i> قبلی</a>
    {% else %}
        <span class="page-link disabled"><i class="fas fa-chevron-right"></i> قبلی</span>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
            <span class="page-link active">{{ num|to_persian_num }}</span>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <a href="?page={{ num }}" class="page-link">{{ num|to_persian_num }}</a>
        {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="page-link">بعدی <i class="fas fa-chevron-left"></i></a>
    {% else %}
        <span class="page-link disabled">بعدی <i class="fas fa-chevron-left"></i></span>
    {% endif %}
</div>
{% endif %}
{% endblock %}